<!-- jsp를 하려면 이 문장이 꼭 필요!! -->
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
        trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<fmt:requestEncoding value="utf-8"/>
<%--
	<sql:query var="rs" dataSource="jdbc/oracle11xe">
	select bdno,bdtitle,userid,regdate,reads
	from board
	order by bdno desc
	</sql:query>
--%>

<%-- 현재페이지 처리 --%>
<c:set var="cpage" value="1"/>
<c:if test="${not empty param.cpage}">
    <c:set var="cpage" value="${param.cpage}"/>
</c:if>

<%-- 페이지 단위로 게시판 리스트 가져오기 --%>
<%-- 오라클의 rank 분석함수를 이용함(쉬움) --%>
<%-- 오라클의 rownum을 이용하면 성능이 좋아짐(어려움) --%>

<%--
<sql:query var="rs" dataSource="jdbc/oracle11xe">
	select * from(
		select bdno,bdtitle,userid,regdate,reads,ceil(dense_rank() over(order by bdno desc)/15) page
		from BOARD
	) where page=?

	&lt;%&ndash; list.jsp?cpage=1 &ndash;%&gt;
	&lt;%&ndash; list.jsp?cpage=2 &ndash;%&gt;
	&lt;%&ndash; list.jsp?cpage=3 &ndash;%&gt;
	<sql:param value="${cpage}"/>
</sql:query>
--%>

<%-- 총페이지 수를 계산하는 SQL 질의 --%>
<%--<sql:query dataSource="jdbc/oracle11xe" var="rs2">
	select ceil(count(bdno)/15) as pages from board
</sql:query>--%>

<%-- 총 페이지 수를 계산하는 SQL 쿼리문을 읽어온 후 그 값을 pages라는 변수에 담음. --%>
<%--<c:forEach var="r2" items="${rs2.rows}">
	<c:set var="pages" value="${r2.pages}"/>
</c:forEach>--%>


<%-- 페이지 이동을 편하게 처리하기 위함 --%>
<%-- 위에서 정의했으므로 간단하게 표현 --%>
<c:set var="url" value="?cpage="/>


<style type="text/css">
    .contest{
        margin: 70px 0px;
    }

    /* 테이블 */
    table {
        margin-top: 20px;
        width: 100%;
        border-top: 3px solid dimgray;
        border-bottom: 3px solid dimgray;
        text-align: center;
    }

    th, td {
        border-collapse: collapse;
    }

    tr {
        height: 50px;
        border: 1px solid dimgray;
        border-left: none;
        border-right: none;
    }

    .bdtitle {
        /* 자동 줄 바꿈 금지 - 한 줄로 출력 */
        white-space: nowrap;
        /* 영역 밖 넘친 문자를 숨김으로 처리 */
        overflow: hidden;
        /* 넘친문자를 줄임표시...로 처리 */
        text-overflow: ellipsis;
    }

    .pgnav {
        width: 550px;
        height: 30px;
        margin: 25px auto;
        text-align: center;
    }

    .pgnav li {
        display: inline;
        padding-right: 20px;
    }

    .cpage {
        color: blue;
        font-weight: bold;
        font-size: 200%;
    }

    #search {
        text-align: right;
        margin-bottom: -20px;
    }

    #search span {
        width: 49%;
    }

    input {
        width: 180px;
        height: 100px;
        line-height: 100px;
    }

    #search span select {
        width: 100px;
    }

    #search span button {
        margin-bottom: 9px;
    }

    .hr {
        border: 2px solid grey;
        margin-bottom: 20px;
    }

    /* 메인 */

    .top3_rank {
        display: inline-block;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .top1 {
        background: lightblue;
    }

    .top2 {
        background: lightgreen;
    }

    .top3 {
        background: lightpink;
    }

    .top2, .top3 {
        margin-left: 20px;
    }

    .top1, .top2, .top3 {
        width: 300px;
        height: 250px;
        float: left;
        display: block;
    }

    .sub_top {
        font-size: 40px;
        margin-top: 23px;
    }

    .sub_nick, .sub_hits {
        font-size: 20px;
        margin-top: 10px;
    }

    .sub_title {
        font-size: 20px;
        margin-top: 33px;
    }

    .sub_pic {
        width: 100px;
        height: 140px;
        background: white;
        margin-top: 30px;
        float: left;
    }

    .sub_title span, .sub_nick span, .sub_hits span {
        margin-left: 10px;
    }

    #write {
        text-align: right;
        margin-top: 10px;
    }

    .sub_title1 span, .sub_nick1 span, .sub_hits1 span {
        margin-left: 10px;
    }
</style>

<div id="contents" class="row">
    <div class="cont">
        <div class="contentsHeader">
            <span class="log">콘테스트</span>
            <span class="wel">&nbsp;&nbsp;&nbsp;자신의 노래를 뽐낼 수 있습니다.</span>
        </div>

        <!-- 1,2,3 순위 -->
    <div class="contest">
        <div class="top3_rank">
            <div class="top1">
                <ul>
                    <li class="sub_top"><span>1위</span></li>
                    <li class="sub_pic"><span></span></li>
                    <li class="sub_title"><span>곡제목</span></li>
                    <li class="sub_title1"><span> : 내 생에 가장 행복한 시간</span></li>
                    <li class="sub_nick"><span>닉네임</span></li>
                    <li class="sub_nick1"><span> : 안뇽하세요</span></li>
                    <li class="sub_hits"><span>조회수</span></li>
                    <li class="sub_hits1"><span> : 10000</span></li>
                </ul>
            </div>
            <div class="top2">
                <ul>
                    <li class="sub_top"><span>2위</span></li>
                    <li class="sub_pic"><span></span></li>
                    <li class="sub_title"><span>곡제목</span></li>
                    <li class="sub_title1"><span> : 내 생에 가장 행복한 시간</span></li>
                    <li class="sub_nick"><span>닉네임</span></li>
                    <li class="sub_nick1"><span> : 안뇽하세요</span></li>
                    <li class="sub_hits"><span>조회수</span></li>
                    <li class="sub_hits1"><span> : 10000</span></li>
                </ul>
            </div>
            <div class="top3">
                <ul>
                    <li class="sub_top"><span>3위</span></li>
                    <li class="sub_pic"><span></span></li>
                    <li class="sub_title"><span>곡제목</span></li>
                    <li class="sub_title1"><span> : 내 생에 가장 행복한 시간</span></li>
                    <li class="sub_nick"><span>닉네임</span></li>
                    <li class="sub_nick1"><span> : 안뇽하세요</span></li>
                    <li class="sub_hits"><span>조회수</span></li>
                    <li class="sub_hits1"><span> : 10000</span></li>
                </ul>
            </div>
        </div>

        <div class="hr"></div>

        <div class="rank_main">
            <!-- 검색폼, 쓰기버튼 -->
            <div id="search">
		<span>
			<!-- 검색 종류 -->
			<select>
                <option>닉네임</option>
                <option>곡제목</option>
            </select>
			<input type="text" name="key" id="bsearch" style="height:30px;"/>
			<button type="button" id="listsBtn">검색</button>
		</span>
            </div>

            <table>

                <!-- 테이블 열 수와 너비 설정 -->
                <colgroup>
                    <col style="width:8%"/>
                    <col style=""/>
                    <col style="width:18%"/>
                    <col style="width:25%"/>
                    <col style="width:10%"/>
                </colgroup>

                <!-- 제목행 출력 -->
                <thead style="border:3px solid dimgray; border-left:none; border-right:none;">
                <tr>
                    <th>No.</th>
                    <th>곡제목</th>
                    <th>닉네임</th>
                    <th>등록일</th>
                    <th>조회수</th>
                </tr>
                </thead>

                <!-- 본문행 출력 -->
                <%-- ListHandler에서 ArrayList로 lists객체를 생성했기 때문 --%>
                <%--    <c:forEach var="r" items="${lists}">
                      <tr>
                        <td>${r.bdno}</td>
                        <td class="bdtitle" id="bdtitle">

                          <!-- 상세 조회 하게 -->
                          <a href="view.mvc?bdno=${r.bdno}">

                              ${r.bdtitle}</a>
                        </td>
                        <td>${r.userid}</td>
                        <td>${fn:substring(r.regdate,0,10)}</td>
                        <td>${r.reads}</td>
                      </tr>
                    </c:forEach>--%>

                <tbody>
                <tr>
                    <td>1</td>
                    <td class="tdtitle"><a href="contestView.do">내 생에 가장 행복한 시간/MC몽</a></td>
                    <td>안뇽하세요</td>
                    <td>2014.11.23 23:10:10</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>내 생에 가장 행복한 시간/MC몽</td>
                    <td>안뇽하세요</td>
                    <td>2014.11.23 23:10:10</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>내 생에 가장 행복한 시간/MC몽</td>
                    <td>안뇽하세요</td>
                    <td>2014.11.23 23:10:10</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>내 생에 가장 행복한 시간/MC몽</td>
                    <td>안뇽하세요</td>
                    <td>2014.11.23 23:10:10</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>내 생에 가장 행복한 시간/MC몽</td>
                    <td>안뇽하세요</td>
                    <td>2014.11.23 23:10:10</td>
                    <td>10000</td>
                </tr>
                </tbody>

            </table>

            <div id="write">
      <span>
        <button type="button" id="writeBtn">곡올리기</button>
      </span>
            </div>


            <ul class="pgnav">
                <li><a href="${url}1">맨처음</a></li>

                <c:if test="${cpage gt 1}">
                    <li><a href="${url}${cpage-1}">이전</a></li>
                </c:if>

                <c:forEach var="i" begin="1" end="${pages}">

                    <%-- 현재 페이지가 i와 같다면 링크제거후 출력 --%>
                    <c:if test="${i eq cpage}">
                        <li class="cpage">${i}</li>
                    </c:if>

                    <%-- 현재 페이지가 i와 다르면 링크로 출력 --%>
                    <c:if test="${i ne cpage}">
                        <li><a href="${url}${i}">${i}</a></li>
                    </c:if>
                </c:forEach>

                <c:if test="${cpage lt pages}">
                    <li><a href="${url}${cpage+1}">다음</a></li>
                </c:if>

                <li><a href="${url}${pages}">맨끝</a></li>
            </ul>

        </div>
    </div>
</div>
</div>

